<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人信息</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
    <style>
		#vue{
			background-color: #F5F5F4;
		}
		/* .navBar {
		  font-weight: bold;
		  font-size: 1.25rem;
		  z-index: 10;
		  width: 100%;
		  color: #333;
		  background-color: #fff;
		  height: 3.75rem;
		  line-height: 5rem;
		  text-align: center;
		  position: fixed;
		  top: 0;
		  left: 0;
		} */
    </style>
</head>

<body>
    <div id="vue">
		<!-- <div class="navBar">
		  <van-row>
		    <van-col span="24">
		      <span>个人信息</span>
		    </van-col>
		  </van-row>
		</div> -->
		<!-- <div style="font-family: PingFang SC;padding-top: 4.125rem;margin-bottom: 3.4375rem;" v-if="personalList"> -->
		<div v-if="personalList">
			<div>
				<van-cell-group v-if="personalList.name">
					<van-cell title="姓名" :value="personalList.name" />
				</van-cell-group>
				<van-cell-group v-if="personalList.teamName">
					<van-cell title="班组" :value="personalList.teamName" />
				</van-cell-group>
				<van-cell-group v-if="personalList.workTypeName">
					<van-cell title="工种" :value="personalList.workTypeName" />
				</van-cell-group v-if="personalList.name">
				<van-cell-group v-if="personalList.unitName">
					<van-cell title="所在单位" :value="personalList.unitName" />
				</van-cell-group>
				<van-cell-group v-if="personalList.unitName">
					<van-cell title="所在项目" :value="personalList.unitName" />
				</van-cell-group>
				<van-cell-group v-if="personalList.unitName">
					<van-cell title="住宿信息" :value="personalList.unitName" />
				</van-cell-group>
			</div>
			<div style="background-color: #fff;margin-top: 0.3125rem;">
				<div style="padding: 0.625rem 0.9375rem;">违章记录</div>
				<van-row style="text-align: center;font-size: 0.875rem;padding: 0.625rem 0;;" v-for="(item, index) in personalList.illegalList" :key="index">
					<van-col :span="8">{{moment(item.workDate).format('YYYY-MM-DD')}}</van-col>
					<van-col :span="8">{{item.categoryName}}</van-col>
					<van-col :span="8">{{item.statusName}}</van-col>
				</van-row>
			</div>
		</div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>
<script>
    new Vue({
        el: '#vue',
        data() {
            return {
				personalList: null,
				projectId: '',
				builderId: ''
            }
        },
        mounted() {
			this.parseQueryString('projectId')
			this.parseQueryString('builderId')
			this.getPersonalList()
        },
        methods: {
			parseQueryString(str){
			    let url = location.href
				url = url.replace('?','?&').split('&')
				url.forEach(item => {
					if (item.indexOf(str + '=') === 0) {
						if (str === 'projectId') {
							this.projectId = item.replace(str + '=', '')
						} else {
							this.builderId = item.replace(str + '=', '')
						}
						
					}
				})
			},
            // 获取个人信息列表
            getPersonalList() {
				axios.get('http://192.168.1.65:9527/system/builder/byQrCode', {
					params: {
						projectId: this.projectId,
						builderId: this.builderId
					}
				})
				 .then(res => {
					 this.personalList = res.data.data
				 }).catch(error => {
					 console.log(error)
				 })
            },
        }
    });


</script>


</html>